“Elexer” Documentation by “TeamXcel” v1.0

“Elexer”

Created:01/07/2018
By: TeamXcel

Thank you for purchasing our landing page. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!

HTML Structure
Template Components
CSS Files and Structure
JavaScript
Sources and Credits
PHP Code Explanation (If your theme uses PHP)
Flash (If your theme uses Flash)
API Usage (If your theme uses an API)
Any additional unique features that need an overview

A) HTML Structure - top

Below is the general HTML structure of the landing page.

1) index.html File Structure - top

The landing page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Elexer is a stunning photography website template">
        <meta name="author" content="TeamXcel">
       
        <title>Elexer | Photography Website Template</title>
        
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
		
		<!-- Font Awesome CSS -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- Themify Icons CSS -->
        <link rel="stylesheet" href="css/themify-icons.css">
        <!-- Elegant Font Icons CSS -->
        <link rel="stylesheet" href="css/elegant-font-icons.css">
        <!-- Elegant Line Icons CSS -->
        <link rel="stylesheet" href="css/elegant-line-icons.css">
		<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Venobox CSS -->
        <link rel="stylesheet" href="css/venobox/venobox.css">
        <!-- Slicknav CSS -->
        <link rel="stylesheet" href="css/slicknav.min.css">
        <!-- animate CSS -->
        <link rel="stylesheet" href="css/animate.min.css">
		<!-- OWL-Carousel CSS -->
        <link rel="stylesheet" href="css/owl.carousel.css">
        <!-- Swiper CSS -->
        <link rel="stylesheet" href="css/swiper.min.css">
		<!-- Main CSS -->
        <link rel="stylesheet" href="css/main.css">
		<!-- Responsive CSS -->
        <link rel="stylesheet" href="css/responsive.css">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
    <body data-spy="scroll" data-target="#navmenu" data-offset="70">
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <div class="site-preloader-wrap">
            <div class="spinner"></div>
        </div><!-- Preloader -->
        
        <section id="header" class="header-section">
          
        </div><!-- Header Menu -->
        
		<div class="slider-section">
            
		</div><!-- Slider -->
        
        <section class="about-section padding">
            
        </section><!-- About -->
        
        <section class="gallery-section padding">
            
        </section><!-- Gallery -->
        
        <div class="instagram-import">
            <div id="instafeed" class="instafeed"></div>
        </div><!-- Instafeed -->
		    
		<div class="clearfix"></div>
		 
		<footer class="footer-section padding text-center">
			
		</footer><!-- /.footer-section -->

		<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
	
		<!-- jQuery Lib -->
		<script src="js/vendor/jquery-1.12.4.min.js"></script>
		<!-- Tether JS -->
		<script src="js/vendor/tether.min.js"></script>
		<!-- Bootstrap JS -->
		<script src="js/vendor/bootstrap.min.js"></script>
		<!-- Slicknav JS -->
		<script src="js/vendor/jquery.slicknav.min.js"></script>
		<!-- OWL-Carousel JS -->
		<script src="js/vendor/owl.carousel.min.js"></script>
		<!-- Swiper JS -->
		<script src="js/vendor/swiper.min.js"></script>
		<!-- Smooth Scroll JS -->
		<script src="js/vendor/smooth-scroll.min.js"></script>
		<!-- venobox JS -->
		<script src="js/vendor/venobox.min.js"></script>
		<!-- ISO Top JS -->
		<script src="js/vendor/jquery.isotope.v3.0.2.js"></script>
		<!-- Image Loaded JS -->
		<script src="js/vendor/imagesloaded.pkgd.min.js"></script>
		<!-- Ajaxchimp JS -->
		<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
		<!-- CSS Plugins JS -->
		<script src="js/vendor/CSSPlugin.min.js"></script>
		<!-- Counterup JS -->
		<script src="js/vendor/jquery.counterup.min.js"></script>
        <!-- waypoints js -->
		<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
		<!-- Instafeed Feed -->
		<script src="js/vendor/instafeed.min.js"></script>
		<!-- Wow JS -->
		<script src="js/vendor/wow.min.js"></script>
		<!-- Main JS -->
		<script src="js/main.js"></script>

    </body>
</html>

B) Template Components - top

The site is made of many sections like header, slider, testimonials, services and more...

1) Header Section - top

<section id="header" class="header-section">
  <div class="container">
	  <div class="branding">
		<h1>
		   <a href="#"><img src="img/logo.png" alt="logo"></a>
	   </h1>
   </div>
  </div>
	<div class="button_container" id="toggle">
	  <span class="top"></span>
	  <span class="middle"></span>
	  <span class="bottom"></span>
	</div>
</section>
<div class="overlay" id="overlay">
  <nav class="overlay-menu">
	<ul>
	  <li ><a href="index.html">Home</a></li>
	</ul>
  </nav>
</div><!-- Header Menu -->

2) Slider Section - top

<div class="slider-section">
	<div class="profile-info">
	   <div class="d-flex align-items-center w-100">
			<div class="mx-auto profile-inner">
			   <h2>Johnston Malone<span>Photographer</span></h2>
			   <span class="border-1"></span>
			   <span class="border-2"></span>
			</div>
		</div>
	</div>
	<div class="owl-carousel main-slider">
		<div class="slide-item" style="background-image: url(img/slider-1.jpg);"></div>
		<div class="slide-item" style="background-image: url(img/slider-2.jpg);"></div>
		<div class="slide-item" style="background-image: url(img/slider-3.jpg);"></div>
	</div>
</div><!-- Slider -->

3) About Section - top

<section class="about-section padding">
	<div class="container">
		<div class="profile"></div>
		<div class="about-content text-center"> 
			<h2 class="wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">Photography has become my language to express my thinking, <br> emotions to people. I love working with people's life style. <br> I love Photography.</h2>
			<img class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1000ms" src="img/sign.png" alt="sign">
		</div>
	</div>
</section><!-- About -->

3) Gallery Section - top

<section class="gallery-section padding">
	<div class="container">
		<div class="row gallery-items">
			<div class="col-md-6 single-item wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms">
				<div class="gallery-wrap">
					<img src="img/gallery-1.jpg" alt="pic">
					<div class="gallery-content">
						<h3>Everything for <br> the comfort of your <br> bedroom</h3>
						<a href="img/gallery-2.jpg" class="gallery-link img-popup" data-gall="galleryimg">Explore <i class="ti-arrow-right"></i></a>
					</div>
				</div>
			</div><!-- Pic-1 -->
		</div>
		<div class=" w-100 text-center">
			<a class="load-more" href="#"><i class="ti-reload"></i>Load More Photographs</a>
		</div>
	</div>
</section><!-- Gallery -->

4) Footer Section - top

<footer class="footer-section padding text-center">
	<div class="container">
	<div class="text-center">
			<div class="brand wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1000ms"><img src="img/logo.png" alt="logo"></div>
			<ul class="social-link">
				<li><a href="#"><i class="fa fa-facebook"></i></a></li>
			</ul>
		</div>
		<p>© 2018 Elexer Powered by TeamXcel</p>
	</div>
</footer><!-- /.footer-section -->

C) CSS Files and Structure - top

These are the css files:

bootstrap.min.css
animate.min.css
elegant-font-icons.css
elegant-line-icons.css
owl.carousel.css
main.css
responsive.css

D) JavaScript - top

This theme use these Javascript files:

jQuery
jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files:

            	bootstrap.min.js
                smooth-scroll.min.js
                owl.carousel.min.js
                jquery.ajaxchimp.min.js
                jquery-1.12.4.min.js
                jquery.mb.YTPlayer.min.js
                owl.carousel.min.js
                venobox.min.js
                wow.min.js
                jquery.counterup.min.js
                main.js

You can edit the contact.js files. for setting contact form

F) Sources and Credits - top

G) PHP Code Explanation - top

There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

TeamXcel

Go To Table of Contents